<template>
  <div class="page-container">
    <van-row>
      <van-col span="24">
        <FortenScan
          ref="scanDom"
          propPlaceholder="请扫描SN/RFID"
          propErrorMsg="请扫描正确的SN/RFID"
          :propTypeArr="['sn','rfid']"
          @scanCall="handleScanOver"
        />
      </van-col>
    </van-row>
    <br>
    <van-form >
    <div class="items-container">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          title="耗材信息"
          name="1">
            <div style="font-size: 16px; color: #000000">
              <van-row>
                <van-col span="8">品名:</van-col>
                <van-col span="16">{{matrData.matrName}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">品规:</van-col>
                <van-col span="16">{{matrData.matrSpec}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">供应商:</van-col>
                <van-col span="16">{{matrData.supplierName}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">厂商:</van-col>
                <van-col span="16">{{matrData.mfgName}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">最后所在仓库:</van-col>
                <van-col span="16">{{matrData.warehouseName}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">批次:</van-col>
                <van-col span="16">{{matrData.lot}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">sn:</van-col>
                <van-col span="16">{{matrData.sn}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">rfid:</van-col>
                <van-col span="16">{{matrData.rfid}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">生产日期:</van-col>
                <van-col span="16">{{matrData.mfgDate}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8">有效期:</van-col>
                <van-col span="16">{{matrData.expDate}}</van-col>
              </van-row>
            </div>
        </van-collapse-item>
        <van-collapse-item
          title="耗材流通情况"
          name="2">
          <van-steps direction="vertical" :active="mf.flowStatus == '已审核'? 0 : 1"
                     active-icon="passed"
                     active-color="#000000"
                     inactive-icon="records"
                     v-for="mf in matrFlow"
                     :key="mf.id">
            <!--<van-step :active="mf.flowStatus == '已审核'? 0 : 1"
                      active-icon="passed"
                      active-color="#000000"
                      inactive-icon="records"
                      v-for="mf in matrFlow"
                      :key="mf.id">
              <div v-if="mf.busType=='IN_SP' || mf.busType=='IN_MANUAL'">
                <van-row>
                  <van-col :span="24">
                    <div class="materialFlow">入库({{mf.flowStatus}})
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <a>{{mf.busDate}}</a>
                </van-row>
                <van-row style="margin-left: 40px">
                  <van-col :span="8">
                    <div><span>单号 : </span>{{mf.busKey}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>入库仓库 : </span>{{mf.warehouseName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>操作人 : </span>{{mf.busUser}}</div>
                  </van-col>
                </van-row>
              </div>
              <div v-if="mf.busType=='OUT_SHIFT'">
                <van-row>
                  <van-col :span="24">
                    <div class="materialFlow">调拨({{mf.flowStatus}})
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <a>{{mf.busDate}}</a>
                </van-row>
                <van-row style="margin-left: 40px">
                  <van-col :span="8">
                    <div><span>单号 : </span>{{mf.busKey}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>调拨仓库 : </span>{{mf.warehouseName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>调入仓库 : </span>{{mf.inWarehouseName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>操作人 : </span>{{mf.busUser}}</div>
                  </van-col>
                </van-row>
              </div>
              <div v-if="mf.busType=='OUT_DIST'">
                <van-row>
                  <van-col :span="24">
                    <div class="materialFlow">科室配送({{mf.flowStatus}})
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <a>{{mf.busDate}}</a>
                </van-row>
                <van-row style="margin-left: 40px">
                  <van-col :span="8">
                    <div><span>单号 : </span>{{mf.busKey}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>配送仓库 : </span>{{mf.warehouseName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>配送至 : </span>{{mf.deptName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>操作人 : </span>{{mf.busUser}}</div>
                  </van-col>
                </van-row>
              </div>
              <div v-if="mf.busType=='OUT_USE' || mf.busType == 'OPRT_USE'">
                <van-row>
                  <van-col :span="24">
                    <div class="materialFlow">消耗({{mf.flowStatus}})
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <a>{{mf.busDate}}</a>
                </van-row>
                <van-row style="margin-left: 40px">
                  <van-col :span="8">
                    <div><span>单号 : </span>{{mf.busKey}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>消耗科室 : </span>{{mf.deptName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>消耗仓库 : </span>{{mf.warehouseName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>操作人 : </span>{{mf.busUser}}</div>
                  </van-col>
                </van-row>

              </div>
              <div v-if="mf.busType=='OUT_SP'">
                <van-row>
                  <van-col :span="24">
                    <div class="materialFlow">供应商退货({{mf.flowStatus}})
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <a>{{mf.busDate}}</a>
                </van-row>
                <van-row style="margin-left: 40px">
                  <van-col :span="8">
                    <div><span>单号 : </span>{{mf.busKey}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>退货科室 : </span>{{mf.deptName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>操作人 : </span>{{mf.busUser}}</div>
                  </van-col>
                </van-row>

              </div>
              <div v-if="mf.busType=='IN_DEPT_RETURN'">
                <van-row>
                  <van-col :span="24">
                    <div class="materialFlow">科室退货({{mf.flowStatus}})
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <a>{{mf.busDate}}</a>
                </van-row>
                <van-row style="margin-left: 40px">
                  <van-col :span="8">
                    <div><span>单号 : </span>{{mf.busKey}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>退货科室 : </span>{{mf.deptName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>退货仓库 : </span>{{mf.warehouseName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>操作人 : </span>{{mf.busUser}}</div>
                  </van-col>
                </van-row>

              </div>
              <div v-if="mf.busType=='IN_USE_RED'">
                <van-row>
                  <van-col :span="24">
                    <div class="materialFlow">冲红入库({{mf.flowStatus}})
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <a>{{mf.busDate}}</a>
                </van-row>
                <van-row style="margin-left: 40px">
                  <van-col :span="8">
                    <div><span>单号 : </span>{{mf.busKey}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>入库仓库 : </span>{{mf.warehouseName}}</div>
                  </van-col>
                  <van-col :span="8">
                    <div><span>操作人 : </span>{{mf.busUser}}</div>
                  </van-col>
                </van-row>

              </div>
            </van-step>-->
            <van-step v-if="mf.busType=='IN_SP' || mf.busType=='IN_MANUAL'">
              <van-row>
                <van-col :span="24">
                  <div class="materialFlow">入库({{mf.flowStatus}})
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <a>{{mf.busDate}}</a>
              </van-row>
              <van-row >
                <van-col :span="12">
                  <div><span>单号 : </span>{{mf.busKey}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>入库仓库 : </span>{{mf.warehouseName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>操作人 : </span>{{mf.busUser}}</div>
                </van-col>
              </van-row>
            </van-step>
            <van-step v-if="mf.busType=='OUT_SHIFT'|| mf.busType == 'IN_SHIFT'|| mf.busType == 'OUT_SHIFT_OW'|| mf.busType == 'IN_SHIFT_OW'">
              <van-row>
                <van-col :span="24">
                  <div class="materialFlow">调拨({{mf.flowStatus}})
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <a>{{mf.busDate}}</a>
              </van-row>
              <van-row >
                <van-col :span="12">
                  <div><span>单号 : </span>{{mf.busKey}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>调拨仓库 : </span>{{mf.warehouseName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>调入仓库 : </span>{{mf.inWarehouseName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>操作人 : </span>{{mf.busUser}}</div>
                </van-col>
              </van-row>
            </van-step>
            <van-step v-if="mf.busType=='OUT_DIST'">
              <van-row>
                <van-col :span="24">
                  <div class="materialFlow">科室配送({{mf.flowStatus}})
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <a>{{mf.busDate}}</a>
              </van-row>
              <van-row >
                <van-col :span="12">
                  <div><span>单号 : </span>{{mf.busKey}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>配送仓库 : </span>{{mf.warehouseName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>配送至 : </span>{{mf.deptName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>操作人 : </span>{{mf.busUser}}</div>
                </van-col>
              </van-row>
            </van-step>
            <van-step v-if="mf.busType=='OUT_USE' || mf.busType == 'OPRT_USE'">
              <van-row>
                <van-col :span="24">
                  <div class="materialFlow">消耗({{mf.flowStatus}})
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <a>{{mf.busDate}}</a>
              </van-row>
              <van-row >
                <van-col :span="12">
                  <div><span>单号 : </span>{{mf.busKey}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>消耗科室 : </span>{{mf.deptName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>消耗仓库 : </span>{{mf.warehouseName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>操作人 : </span>{{mf.busUser}}</div>
                </van-col>
              </van-row>

            </van-step>
            <van-step v-if="mf.busType=='OUT_SP'">
              <van-row>
                <van-col :span="24">
                  <div class="materialFlow">供应商退货({{mf.flowStatus}})
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <a>{{mf.busDate}}</a>
              </van-row>
              <van-row >
                <van-col :span="12">
                  <div><span>单号 : </span>{{mf.busKey}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>退货科室 : </span>{{mf.deptName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>操作人 : </span>{{mf.busUser}}</div>
                </van-col>
              </van-row>

            </van-step>
            <van-step v-if="mf.busType=='IN_DEPT_RETURN'">
              <van-row>
                <van-col :span="24">
                  <div class="materialFlow">科室退货({{mf.flowStatus}})
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <a>{{mf.busDate}}</a>
              </van-row>
              <van-row >
                <van-col :span="12">
                  <div><span>单号 : </span>{{mf.busKey}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>退货科室 : </span>{{mf.deptName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>退货仓库 : </span>{{mf.warehouseName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>操作人 : </span>{{mf.busUser}}</div>
                </van-col>
              </van-row>

            </van-step>
            <van-step v-if="mf.busType=='IN_USE_RED'">
              <van-row>
                <van-col :span="24">
                  <div class="materialFlow">冲红入库({{mf.flowStatus}})
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <a>{{mf.busDate}}</a>
              </van-row>
              <van-row >
                <van-col :span="12">
                  <div><span>单号 : </span>{{mf.busKey}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>入库仓库 : </span>{{mf.warehouseName}}</div>
                </van-col>
                <van-col :span="12">
                  <div><span>操作人 : </span>{{mf.busUser}}</div>
                </van-col>
              </van-row>

            </van-step>
          </van-steps>
        </van-collapse-item>
        <van-collapse-item title="加工单详细" name="3">
          <div>
            <div
              v-for="(mf,index) in processInfo"
              :key="index"
            >
              <div v-if="mf.processType=='合并' || mf.processType=='拆分'">
                <el-row>
                  <el-col :span="24">
                    <div class="materialFlow">({{mf.processType}})
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <a>{{mf.gmtModified}}</a>
                </el-row>
                <el-row style="margin-left: 140px">
                  <el-col :span="6">
                    <div><span>加工单号 : </span>{{mf.busKey}}</div>
                  </el-col>
                  <el-col :span="6">
                    <div><span>仓库 : </span>{{mf.warehouseName}}</div>
                  </el-col>
                  <el-col :span="6">
                    <div><span>主单据SN : </span>{{mf.sn}}</div>
                  </el-col>
                  <el-col :span="6">
                    <div><span>加工时间 : </span>{{mf.gmtModified}}</div>
                  </el-col>
                </el-row>
                <br />
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    </van-form>
  </div>
</template>

<script>
import barcodeParse from '@/util/barcodeParse.js'

export default {
  data() {
    return {
      activeNames: ['1', '2', '3'],
      scan: '',
      matrData: [],
      matrFlow: [],
      processInfo: []

    }
  },
  props: {},
  mounted() {

  },
  computed: {},
  methods: {
    //扫描
    handleScanOver(scanValue) {
      this.matrFlow = []
      this.processInfo = []
      let codeType = barcodeParse.barCodeType(scanValue)
      if (codeType == 'SN' || codeType == 'RFID') {
        let params = {
          isScan: 1,
          sn: scanValue,
        }
        this.$ajax.get('/wm/work_order/get_list_by_sn', {params}).then(res => {
          if (res.code == 0) {
            this.clearForm()
            if (res.data) {
              this.matrData = res.data.stockDTO
              for (let i = res.data.list.length - 1; i >= 0; i -= 1) {
                if (res.data.list[i].flowStatus == 'end') {
                  this.$set(res.data.list[i], 'flowStatus', '已审核')
                } else {
                  this.$set(res.data.list[i], 'flowStatus', '处理中')
                }
                this.matrFlow.push(res.data.list[i])
              }
              for (let i = res.data.processListrocesses.length - 1; i >= 0; i -= 1) {
                if (res.data.processListrocesses[i].processType == '1') {
                  this.$set(res.data.processListrocesses[i], 'processType', '拆分')
                } else {
                  this.$set(res.data.processListrocesses[i], 'processType', '合并')
                }
                this.processInfo.push(res.data.processListrocesses[i])
              }
            } else {
              this.$notify.success('未查询到数据')
            }
          }
        })
      } else {
        this.$notify.warning('请扫描有效的SN/RFID')
      }
    },
    resetScan() {
      this.scan = ''
      this.$refs.scanDom.focus()
    },
    clearForm() {
      this.matrFlow = []
      this.resetScan()
    }
  },
  components: {}

}
</script>

<style lang="scss" scoped>
  .items-container {
    min-height: 80px;
  }
  a{
    color: #4d99fc;
  }
  .materialFlow{
    font-weight: bold;
    font-size: 16px;
  }

</style>
